<template>
	<view class="book">
		<view class="book-img-list">
			<view class="imgItem">
				<image src="../../static/qf.gif"></image>
			</view>
		</view>
		<view class="book-today">
			<view class="book-today-item">
				<view class="title"><text style="font-size: 28upx;">今日投入</text>LABred</view>
				<view class="sum color2">{{LABsum.LABred}}</view>
			</view>
			<view class="book-today-item">
				<view class="title"><text style="font-size: 28upx;">今日产出</text>LABbule</view>
				<view class="sum color2">{{LABsum.LABblue}}</view>
			</view>
		</view>
		<view class="book-info">
			<view class="book-info-item">
				<view class="title">累计投入LABred</view>
				<view class="sum color2">{{LABsum.LABred}}</view>
			</view>
			<view class="book-info-item">
				<view class="title">累计已产出LABblue</view>
				<view class="sum color2">{{LABsum.LABblue}}</view>
			</view>
			<view class="book-info-item">
				<view class="title">记账等级</view>
				<view class="sum color2 LABvip">
					{{LABvip}}
					<!-- <view class="iconfont iconluobu"></view>
					<view class="iconfont iconluobu"></view>
					<view class="iconfont iconluobu"></view> -->
				</view>
			</view>
		</view>
		<view class="book-btn bg1" hover-class="btn-hover" @click="onLABExchange('putintoRed')">投入LABred</view>
		<view class="book-btn bg2" hover-class="btn-hover" @click="onLABExchange('red')">兑换SEED为LABred</view>
		<view class="book-btn bg2" hover-class="btn-hover" @click="onLABExchange('tk')">兑换LABbule为LABtk</view>
		<view class="book-btn bg6" hover-class="btn-hover" @click="goEarnings">查看账本</view>
		<van-popup :show="popupShow"  position="bottom" @close="onPopupClose">
			<view class="LAB-mod">
				<view class="LAB-title">{{LABdialog.title}}</view>
				<view class="iconfont iconguanbi" @tap="onPopupClose"></view>
				<view class="LAB-mod-wrap">
					<view class="LAB-content">
						<view class="LAB-count">
							<view class="LAB-count-item" v-if="LABdialog.title === '投入LABred'">
								<view class="itemsSum">
									<view class="color1"><text class="color-82">{{LABdialog.type}}：</text>{{LABdialog.balance}}</view>
									<view class="recharge" @click="tabType('red')">兑换更多LABred</view>
								</view>
								<view class="itemRule">
									投入LABred，放大五倍，每天释放千分之二个LABblue
								</view>
								<view v-if="labValue" class="itemsCount">预计每日释放：<text class="color1">  {{labValue*0.01}} </text> 个LABblue</view>
							</view>
							<view class="LAB-count-item" v-if="LABdialog.title === '兑换LABred'">
								<view class="itemsSum">
									<view class="color1"><text class="color-82">{{LABdialog.type}}：</text>{{LABdialog.balance}}</view>
									<view class="recharge" @tap="onRecharge">购买更多SEED</view>
								</view>
								<view class="itemRule">
									将seed兑换为LABred，兑换比例 1：1
								</view>
								<view v-if="labValue" class="itemsCount">兑换成：<text class="color1">  {{labValue}} </text> 个LABred</view>
							</view>
							<view class="LAB-count-item" v-if="LABdialog.title === '兑换LABtk'">
								<view class="itemsSum">
									<view class="color1"><text class="color-82">{{LABdialog.type}}：</text>{{LABdialog.balance}}</view>
									<!-- <view class="recharge" @click="tabType('putintoRed')">投入LABred</view> -->
								</view>
								<view class="itemRule">
									将LABblue兑换为LABtk，兑换比例 100：1
								</view>
								<view v-if="labValue" class="itemsCount">兑换为：<text class="color1">  {{labValue*0.01}} </text> 个LABtk</view>
							</view>
						</view>
						<view class="LAB-group">
							<van-cell-group>
							  <van-field
							    type="number"
								maxlength="10"
								:value="labValue"
								:placeholder="LABdialog.title + '数量'"
								:border="false"
								clearable
								@change="onLABChange"
							  />
							</van-cell-group>
						</view>
						 <view>
							 <van-button size="large" custom-class="LAB-submit-btn" @click="onDialog(LABdialog.title)" type="danger">
								{{LABdialog.btnText}}
							 </van-button>
						 </view>
					</view>
				</view>
			</view>
		</van-popup>
		<dialog-pwd
		 :dialogType="LABdialog.title"
		 :dialogShow="dialogShow"
		 @emitClose="emitClose"
		 ></dialog-pwd>
	</view>
</template>

<script>
import DialogPwd from '../../components/dialog/pwd-dialog.vue'
import { mapActions, mapGetters } from 'vuex';
export default {
	components: {
		DialogPwd
	},
	data() {
		return {
			LABsum: {
			   LABblue: 0,
			   LABred: 0
			},
			LABvip: '',
			LABdialog: {},
			dialogShow: false,
			popupShow: false,
			labValue: ''
			
		};
	},
	onShow() {
		this.getUserlv()
		this.investLABredSum()
	},
	computed: {
		...mapGetters({
			userInfo: 'getUserInfo',
			wallet: 'getWalletInfo'
		})
	},
	methods: {
		...mapActions([
			'setWalletInfo'
		]),
		tabType (type) {
			if (type === 'red') {
				this.LABdialog = {
					name: 'LABred',
					title: '兑换LABred',
					type: 'SEED余额',
					btnText: '确定兑换',
					balance: this.wallet.seed
				}
				return
			}
			if (type === 'putintoRed') {
				this.LABdialog = {
					name: 'LABred',
					title: '投入LABred',
					type: 'LABred余额',
					btnText: '确定投入',
					balance: this.wallet.labred
				}
				return
			}
			this.LABdialog = {
				name: 'LABtk',
				title: '兑换LABtk',
				type: 'LABblue余额',
				btnText: '确定兑换',
				balance: this.wallet.shifang
			}
		},
		onLABChange (e) {
			this.labValue = e.detail ? parseInt(e.detail) : 0
		},
		onLABExchange (type) {
			this.popupShow = true
			this.tabType(type)
		},
		onPopupClose () {
			this.labValue = ''
			this.popupShow = false
		},
		onDialog () {
			if (this.labValue < 1 || this.labValue > this.LABdialog.balance) {
				uni.showToast({
					title: this.LABdialog.title + '余额不足', 
					icon: 'none'
				});
				return 
			}
			 this.dialogShow = true
			 uni.hideKeyboard()
		},
		emitClose (e) {
			this.dialogShow = false
			if (e === 'off') return
			switch(this.LABdialog.title){
				case '兑换LABred':
					this.exchangeLABred()
				  break;
				case '兑换LABtk':
				  	this.exchangeLABtk()
				  break;
				case '投入LABred':
					this.buyWealth()
				  break;
				default:
				 
			}
		},
		getUserlv () {
			this.$http.getUserlv({
				uid: this.userInfo.id
			}).then(e => {
				if (e.data) {
					this.LABvip = e.data
				}
			})
		},
		investLABredSum () { // 投入红、产出蓝
// 			this.$http.investLABredSum({uid: this.userInfo.id}).then(e => {
// 				if (e.data) {
// 					this.LABsum.LABred = e.data
// 				}
// 			})
			this.LABsum.LABred = this.wallet.labblue
			this.LABsum.LABblue = this.wallet.shifang
		},
		exchangeLABred () {
			this.$http.exchangeLABred({
				addr: this.userInfo.addr,
				value: this.labValue
			}).then(e => {
				if (e.data.msg.toLowerCase() === 'ok') {
					uni.showToast({
						title: '兑换成功', 
						icon: 'none'
					});
					this.wallet.seed -= this.labValue
					this.wallet.labred += this.labValue
					this.setWalletInfo(this.wallet)
					this.labValue = ''
					return
				}
				uni.showToast({
					title: e.data.msg, 
					icon: 'none'
				});
			})
		},
		exchangeLABtk () {
			this.$http.exchangeLABtk({
				addr: this.userInfo.addr,
				value: this.labValue,
				type: 1
			}).then(e => {
				if (e.data.msg.toLowerCase() === 'ok') {
					uni.showToast({
						title: '兑换成功', 
						icon: 'none'
					});
					this.wallet.labred += this.labValue
					this.setWalletInfo(this.wallet)
					this.labValue = ''
					return
				}
				uni.showToast({
					title: e.data.msg, 
					icon: 'none'
				});
			})
		},
		buyWealth () {
			this.$http.buyWealth({
				wid: 1,
				uid: this.userInfo.id,
				addr: this.userInfo.addr,
				value: this.labValue
			}).then(e => {
				if (e.data.msg.toLowerCase() === 'ok') {
					uni.showToast({
						title: '投入成功', 
						icon: 'none'
					});
					this.wallet.shifang -= this.labValue
					this.setWalletInfo(this.wallet)
					this.LABsum.LABred += this.labValue
					this.labValue = ''
					this.popupShow = false
					return
				}
				uni.showToast({
					title: e.data.msg, 
					icon: 'none'
				});
			})
		},
		goEarnings (key) {
			uni.navigateTo({
				url: '/pages/bookkeeping/earnings/index?type=' + key
			});
		},
		onRecharge () {
			uni.navigateTo({
				url: '/pages/wallet/recharge/index'
			});
		}
	},
	onNavigationBarButtonTap(e) {
		uni.showToast({
			title: '你点了规则', 
			icon: 'none'
		});
	},
};
</script>

<style scoped lang="scss">
image{
	width: 100%;
	height: 100%;
}
.book {
	padding: 50upx 40upx;
	&-img-list{ 
		display: flex;
		justify-content: space-around;
		margin-bottom: 60upx;
		margin-top: 30upx;
		padding: 20upx;
		.imgItem{
			width: 320upx;
			height: 320upx;
		}
	}
	&-today {
		position: absolute;
		top: 30upx;
		left: 30upx;
		width: 50%;
		&-item {
			padding: 20upx 0;
			.title {
				margin-bottom: 20upx;
				font-size: 22upx;
				line-height: 1;
				color: #757271;
			}
			.sum {
				line-height: 1;
				font-size: 38upx;
				.iconfont {
					font-size: 36upx;
				}
			}
		}
	}
	&-info {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-bottom: 50upx;
		padding: 30upx 20upx 20upx 20upx;
		text-align: center;
		background-color: #fff;
		border-radius: 10upx;
		box-shadow: 0 5upx 15upx 0 rgba(0,0,0,0.10);
		&-item {
			width: 33.3%;
			padding: 20upx 0;
			.title {
				margin-bottom: 20upx;
				font-size: 22upx;
				line-height: 1;
				color: #757271;
			}
			.sum {
				line-height: 1;
				font-size: 40upx;
				.iconfont {
					font-size: 36upx;
				}
			}
			.LABvip {
				font-size: 36upx;
			}
		}
	}
	&-btn {
		width: 100%;
		height: 70upx;
		margin-bottom: 30upx;
		line-height: 70upx;
		text-align: center;
		color: #fff;
		border-radius: 10upx;
	}
	.LAB-mod {
		position: relative;
		width: 100%;
		text-align: center;
		background-color: #fff;
		.iconguanbi {
			position: absolute;
			top: 30upx;
			right: 40upx;
			z-index: 2;
			width: 60upx;
			height: 60upx;
			font-size: 44upx;
			color: #9b9b9b;
		}
		.LAB{
			&-title {
				padding: 30upx 0;
				font-size: 34upx;
				// color: #9b9b9b;
			}
			&-count {
				margin: 10upx 0;
				text-align: left;
				font-size: 26upx;
				&-item {
					padding: 0 10upx;
					.itemsSum {
						display: flex;
					}
					.itemRule {
						margin-top: 20upx;
						margin-bottom: 20upx;
						font-size: 20upx;
						line-height: 1.4;
						color: #7e7e7e;
					}
					.itemsCount {
						margin-bottom: 10upx;
						font-size: 22upx;
						.color1 {
							font-size: 28upx;
							font-size: 500;
						}
					}
					.recharge {
						margin-left: 20upx;
						color: #6eb92b;
						font-size: 600;
						text-decoration:underline
					}
				}
			}
			&-group {
				margin-bottom: 40upx;
			}
		}
		&-wrap {
			padding: 10upx 50upx 80upx 50upx;
		}
	}
}

</style>
